<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{padding: 0;border: 0;margin: 0;outline: 0;box-sizing: border-box;}
			body{padding: 20px;}
			div{height: 50px;border: 1px solid #ddd;}
			input{height: 50px;width:100%;border: 1px solid #ddd;margin: 20px 0;padding: 0 10px;}
			.start{line-height:50px;text-align:center;cursor: pointer;}
		</style>
	</head>
	<body>
		<div class="screen" id="screen"></div>
		<input type="text" name="" id="input" placeholder="输入数字">
		<div class="start" id="start">点击开始猜数</div>
		<script type="text/javascript">
			// 思路步骤：
			// 第一步：写界面 显示结果 输入数字框 点击开始猜数
			// 第二步：获取当前用到的元素。
			// 第三步：生成一个随机数。
			// 第四步：输入数字，开始猜数。
			var screen = document.getElementById('screen');
			var input = document.getElementById('input');
			var start = document.getElementById('start');

			var randomNumber = Math.floor(Math.random() * 101);
			var maxNumber = 100;
			var minNumber = 0;
			var count = 1;
			console.log(randomNumber);
			start.onclick = function(){
				if(count++ <= 3){
					if(input.value < randomNumber){
						screen.innerText = '猜小了 请猜' + input.value + '到' + maxNumber + '之间的值';
						minNumber = input.value;
					}
					if(input.value > randomNumber){
						screen.innerText = '猜大了 请猜' + minNumber + '到' + input.value + '之间的值';
						maxNumber = input.value;
					}
					if(input.value == randomNumber){
						screen.innerText = '猜对了 请继续猜';
						randomNumber = Math.floor(Math.random() * 101);
						input.value = '';
						count = 1;
						console.log(randomNumber);
					}
				}else{
					screen.innerText = '游戏结束';
				}
				
			}
		</script>
	</body>
</html>